<template>
    <div class="inspectionPlanDialog">
        <el-dialog v-model="dialogVisible" title="" :before-close="handleClose" align-center
            :close-on-click-modal="false" :close-on-press-escape="false">
            <div class="dialog_content">
                <div class="dialog_title">
                    <span>巡检计划</span>
                </div>
                <div class="dialog_body">
                    <div class="searchBar">
                        <el-input v-model="project" placeholder="请输入巡检项目">
                            <template #append>
                                <i-ep-Search class="icon" color="#fff" />
                            </template>
                        </el-input>
                    </div>
                    <div class="navBar">
                        <div class="nav_item" :class="{ 'nav_active': navIndex == 0 }" @click="changeNav(0)">全部</div>
                        <div class="nav_item" :class="{ 'nav_active': navIndex == 1 }" @click="changeNav(1)">设备间</div>
                        <div class="nav_item" :class="{ 'nav_active': navIndex == 2 }" @click="changeNav(2)">设备</div>
                        <div class="nav_item" :class="{ 'nav_active': navIndex == 3 }" @click="changeNav(3)">公区</div>
                    </div>
                    <el-table class="table_common" :data="tableList.list" style="width :100%;" border stripe
                        :scrollbar-always-on="true">
                        <el-table-column label="序号" type="index" />
                        <el-table-column prop="proName" label="巡检项目" />
                        <el-table-column prop="locaciton" label="巡检位置" />
                        <el-table-column prop="time" label="巡检周期" />
                        <el-table-column prop="Scheduling" label="巡检排班" />
                        <el-table-column label="操作" align="left">
                            <template #default="scope: any">
                                <span class="btn_1">查看</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <CommonPagination2 :pageNum="searchData.pageNum" :pageSize="searchData.pageSize" :pageTotal="total"
                        @pageFunc="pageFunc" @sizeChange="sizeChange"></CommonPagination2>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    }
})
const dialogVisible = ref(false)

watch(() => props.visible, (newVal) => {
    dialogVisible.value = newVal;
})

let tableList = reactive({
    list: [
        { proName: '污水厂垃圾焚烧', locaciton: '设备间公开区域', time: '2次/日', Scheduling: "9:00-10:00   16:00-15:00" },
        { proName: '污水厂垃圾焚烧', locaciton: '设备间公开区域', time: '2次/日', Scheduling: "9:00-10:00   16:00-15:00" },
        { proName: '污水厂垃圾焚烧', locaciton: '设备间公开区域', time: '2次/日', Scheduling: "9:00-10:00   16:00-15:00" },
        { proName: '污水厂垃圾焚烧', locaciton: '设备间公开区域', time: '2次/日', Scheduling: "9:00-10:00   16:00-15:00" },
        { proName: '污水厂垃圾焚烧', locaciton: '设备间公开区域', time: '2次/日', Scheduling: "9:00-10:00   16:00-15:00" },
        { proName: '污水厂垃圾焚烧', locaciton: '设备间公开区域', time: '2次/日', Scheduling: "9:00-10:00   16:00-15:00" },
        { proName: '污水厂垃圾焚烧', locaciton: '设备间公开区域', time: '2次/日', Scheduling: "9:00-10:00   16:00-15:00" },
        { proName: '污水厂垃圾焚烧', locaciton: '设备间公开区域', time: '2次/日', Scheduling: "9:00-10:00   16:00-15:00" },
        { proName: '污水厂垃圾焚烧', locaciton: '设备间公开区域', time: '2次/日', Scheduling: "9:00-10:00   16:00-15:00" },
        { proName: '污水厂垃圾焚烧', locaciton: '设备间公开区域', time: '2次/日', Scheduling: "9:00-10:00   16:00-15:00" },
    ]
})
let project = ref("");//巡检项目
let navIndex = ref(0);//nav栏下标

let searchData = reactive({
    pageNum: 1,
    pageSize: 10
})

let total = ref(90);

const emit = defineEmits(['closeDialog'])
const handleClose = () => {
    emit('closeDialog');
}

const changeNav = (index: number) => {
    if (navIndex.value != index) {
        navIndex.value = index;
    }
}

const pageFunc = () => {

}

const sizeChange = () => {

}

</script>

<style lang="scss" scoped>
.inspectionPlanDialog {
    :deep(.el-dialog) {
        width: vh(1200);
        height: vh(760);
        background: rgba(0, 52, 71, 0.7);
        padding: vh(11) vh(10);
        color: #fff;
        border: 1px solid #00B1E1;
        border-radius: 0;

        .el-dialog__header {
            padding: 0;

            .el-dialog__close {
                color: #fff;
            }
        }

        .dialog_content {
            .dialog_title {
                color: #fff;
                width: vh(242);
                height: vh(37);
                background: linear-gradient(90deg, rgba(0, 228, 255, 0.2), rgba(0, 228, 255, 0));
                font-size: vh(18);
                color: #FFFFFF;
                line-height: vh(37);
            }

            .dialog_body {
                padding: vh(18) vh(10) 0 vh(14);

                .searchBar {
                    .el-input {
                        width: vh(258);
                        height: vh(32);
                        background: rgba(0, 17, 16, 0.1);
                        border-radius: vh(6);
                        border: 1px solid #00B7EA;

                        .el-input__wrapper {
                            background: rgba(0, 17, 16, 0.1);
                            border: none;
                            box-shadow: none;
                        }

                        .el-input-group__append {
                            width: vh(52);
                            padding: 0;
                            background: #00B7EA;
                            border: none;
                            box-shadow: none;
                        }


                    }
                }

                .navBar {
                    display: flex;
                    margin-top: vh(18);
                    margin-bottom: vh(16);

                    .nav_item {
                        padding: 0 vh(9);
                        height: vh(20);
                        line-height: vh(20);
                        background: rgba(0, 174, 211, 0.3);
                        border-radius: vh(4);
                        margin-right: vh(20);
                        font-size: vh(12);
                        color: #FFFFFF;
                        min-width: vh(48);
                        text-align: center;
                        cursor: pointer;

                        &.nav_active {
                            background: #00AED3;
                        }
                    }
                }

                .table_common {
                    margin-bottom: vh(21);
                }
            }
        }
    }
}
</style>
